<template>
    <div class="timeline">
        <a-timeline :mode="mode" :reverse="reverse">
            <a-timeline-item v-for="timeline in timelines" :key="timeline.id">
                <span class="time">{{timeline.time}}</span><br>
                <div v-for="article in timeline.articles" :key="article.id">
                    <router-link :to="'/articleInfo/'+article.id">
                        <span class="title">《{{article.articleTitle}}》</span>
                        <br v-if="windowFlag==false">
                        <span class="createTime">{{article.createTime}}</span>
                    </router-link>
                </div>
            </a-timeline-item>
        </a-timeline>
    </div>
</template>

<script>
export default {
    props: ["windowFlag"],
    data(){
        return{
            mode: "alternate",
            reverse: true,
            timelines:[
            ]
        }
    },
    mounted() {
        this.getTimeline();
        if(this.windowFlag==false){
            this.mode="left";
        }
    },
    methods:{
        /* 获取文章归档信息 */
        getTimeline(){
            this.$api.article.getTimeline().then(res => {
                if(res.code==200){
                    this.timelines = res.data.timelines;
                }
            })
        }
    }
};
</script>

<style lang="less" scoped>
.timeline {
    width: 100%;
    height: auto;
    min-height: 700px;
    margin-top: 20px;
    padding: 0 20px;
    .time{
        color: white;
        font-size: 28px;
    }
    .title {
        
        color: white;
        font-size: 22px;
    }
    .createTime{
        @media (min-width: 1100px){
            color: white;
            font-size: 18px;
        }
        color: white;
        font-size: 16px;
    }
}
</style>